<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <title>用户注册—易购触屏版</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/main.css">
  <link rel="stylesheet" href="./mui/css/mui.css">
  <link rel="stylesheet" href="./mui/css/icons-extra.css">
</head>

<body>
  <div id="app">
    <!-- 公用头部 -->
    <nav class="nav">
      <a class="goback" href="javascript:history.back(1)">
        <span class="mui-icon mui-icon-undo"></span>
      </a>
      <div class="nav-title">用户注册</div>
    </nav>
    <!-- 页面主体 -->
    <section>
      <div>
        <input class="phone" id="memberPhone" placeholder="请输入您的手机号">
        <input class="email" id="email" placeholder="请输入您的邮箱">
        <input class="username" placeholder="请输入您的名字" id="username">
        <input class="password" placeholder="请设置密码(6-18位数字和字母组合)" id="password" type="password" required="required">
        <input class="password" placeholder="请确认密码" id="password2" type="password" required="required">
      </div>
      <div>
        <button type="button" class="mui-btn mui-btn-warning" id="regt" @click="reg" onclick="regt">
          注册
        </button>
      </div>
      <div>
        <a class="login" href="#">登录</a>
        <a class="forgetPassword" href="#">忘记密码</a>
      </div>
    </section>
    <!-- 公用尾部导航 -->
    <footer class="footer">
      <a href="#">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a href="#">
        <span class="mui-icon mui-icon-personadd"></span>
        <span class="mui-tab-label">分类</span>
      </a>
      <a href="#">
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
        <span class="mui-tab-label">购物车</span>
      </a>
      <a href="#">
        <span class="mui-icon mui-icon-gear current"></span>
        <span class="mui-tab-label current">我的</span>
      </a>
    </footer>
  </div>
</body>

</html>
<!--  提示，本题需要表单验证
如：手机号必须输入纯数值，手机只能是11位
邮箱必须包含@符号
/^\w+@[a-z0-9]+.[a-z]{2,4}$/.test()
 -->
<script src="./js/axios.min.js"></script>
<script>
  const regt=document.getElementById("regt")
    regt.onclick=function(){
        let username=document.getElementById('username').value
        let memberPhone=document.getElementById('memberPhone').value
        let password=document.getElementById('password').value
        let password2=document.getElementById('password2').value
        let email=document.getElementById('email').value
        if(memberPhone===''){
            alert("电话号码不能为空")
            return false
        }
        if(!/^(([1-9]\d+)|0)(\.\d{1,2})?$/.test(memberPhone)){
            alert("电话号码必须为合理数字")
            return false
        } 
        if(email===''){
            alert("邮箱不能为空")
            return false
        }
        if(/^\w+@[a-z0-9]+.[a-z]{2,4}$/.test(email)){
            alert("邮箱错误")
            return false
        } 
        if(username===""){
            alert("用户名不能为空")
            return false
        }
        if(password===''){
            alert("密码不能为空")
            return false
        }
        if(password2===''){
            alert("密码不能为空")
            return false
        } 
        if(password!==password2){
            alert("两个密码不一致")
            return false
        }
axios.post("http://localhost:8090/h5/user/addMember",{username,memberPhone,password,email}).then(res=>{
  console.log(res.data)
  alert("注册成功")
})
}
</script>